<!--
 * @Description:
 * @Author: Ronda
 * @Date: 2021-06-24 23:56:19
 * @LastEditors: liqi
 * @LastEditTime: 2022-10-16 16:02:22
-->
<template>
  <!-- 订单详情页 -->
  <div>
    <!-- 返回按钮 -->
    <router-link class="goback" to="/admin/order/List">返回</router-link>
    <router-view />
    <!-- 第二部分 表格数据 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="订单项编号" align="center" />
      <el-table-column prop="productId" label="产品编号" align="center" />
      <el-table-column prop="product" label="产品" align="center">
        <template slot-scope="scope">
          {{ scope.row.product.name }}
        </template>
      </el-table-column>
      <el-table-column prop="product" label="产品图片" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.product.photo" alt="加载失败">
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价" align="center">
        <template slot-scope="scope">
          <span>￥<span class="money">{{ scope.row.price }}</span>元</span>
        </template>
      </el-table-column>
      <el-table-column prop="number" label="数量" align="center" />
    </el-table>
    <!-- 第三部分 卡片展示 -->
    <div class="cards">
      <div class="card">
        <div class="card-header">订单基本信息</div>
        <div class="card-body">
          订单编号: {{ cardData.id }}<br>
          订单金额: <span>￥<span class="money">{{ cardData.total }}</span>元</span> <br>
          下单时间: {{ cardData.orderTime | fmtDate }} <br>
          订单状态: {{ cardData.status }}
        </div>
      </div>
      <div v-if="cardData.status===&quot;待接单&quot;" class="card">
        <div class="card-header">接单者信息</div>
        <div class="card-body">
          接单者: {{ cardData.employee.username }} {{ cardData.employee.realname }}<br>
          接单者手机号: {{ cardData.employee.telephone }}
        </div>
      </div>
      <div class="card">
        <div class="card-header">下单者信息</div>
        <div class="card-body">
          下单者: {{ cardData.customer.username }} {{ cardData.customer.realname }}<br>
          下单者手机号: {{ cardData.customer.telephone }}
        </div>
      </div>
      <div class="card">
        <div class="card-header">雇主信息</div>
        <div class="card-body">
          雇主: {{ cardData.address.username }}<br>
          雇主手机号: {{ cardData.address.telephone }} <br>
          服务地址: {{ cardData.address.city }}{{ cardData.address.area }}{{ cardData.address.address }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      cardData: []
    }
  },
  computed: {},
  created() {
    this.tableData = this.$route.query.orderLines
    this.cardData = this.$route.query
    // console.log(this.cardData);
  },
  mounted() {},
  methods: {}
}
</script>
<style scoped>
.goback {
  color: #56c4bd;
}
.goback:hover {
  text-decoration: underline;
}
.money {
  color: #e65d6e;
  font-size: 18px;
  margin: 0 5px;
}
.cards{
  margin-top: 30px;
  display: flex;
}
.card{
  width: 302px;
  /* height: 300px; */
  margin-right: 30px;
  box-shadow: 0 0 10px #ccc;
  border-radius: 5px;
  overflow: hidden;
}
.card-header{
  width: 100%;
  padding: 18px 20px;
  background-color: #2cb5ac;
  color: white;
}
.card-body{
  width: 100%;
  padding: 20px;
  line-height: 35px;
}
</style>
